<template>
  <div class="tab">
    <div>
      <el-tabs v-model="tabIndex" class="tab_area" type="card" @tab-click="handleTabs">
        <!-- <el-tab-pane name="1" label="图片">
          <DataTable />
        </el-tab-pane>
        <el-tab-pane name="2" label="音频">
          <DataTable />
        </el-tab-pane>
        <el-tab-pane name="3" label="视频">
          <DataTable />
        </el-tab-pane> -->
        <el-tab-pane name="4" label="文档">
          <DataTable :ref="`DataTable${tabIndex}`" :group-id="groupId" :file-type="4" @reloadGroupList="reloadGroupList" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import DataTable from './dataTable.vue'

export default {
  name: 'Tab',
  components: { DataTable },
  props: {
    groupId: {
      type: Number,
      default: 0
    }
  },
  data() {
    // 这里存放数据
    return {
      tabIndex: '4'
    }
  },
  computed: { },
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  async created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.$refs[`DataTable${this.tabIndex}`].loadData()
  },
  // 生命周期 - keep-alive
  async activated() {

  },
  // 方法集合
  methods: {
    handleTabs() {

    },
    reloadGroupList() {
      this.$emit('reloadGroupList')
    }
  },
  // 进入页面前
  beforeRouteEnter(to, from, next) {
    next(vm => {

    })
  },
  // 离开页面前
  beforeRouteLeave(to, from, next) {
    next()
  }
}
</script>

<style lang="scss" scoped>
.tab{
  margin: 40px 30px 30px 30px;
  background-color: #f6f6f6;
  .tab_area{
    width: 1540px;
  }
}

.marginR15{
  margin-right: 15px;
}

::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item {
    border-bottom: 1px solid transparent;
    border-left: none;
    -webkit-transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

::v-deep .el-tabs__header {
    padding: 0;
    position: relative;
    margin: 0;
}

::v-deep .el-tab-pane{
  width: 100%;
  min-width: 1540px;
  min-height: 300px;
  background: #FFFFFF;
  box-shadow: 0px 2px 40px 0px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  padding: 0;
}

::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
    background: #FFF;
}

::v-deep .el-tabs--card > .el-tabs__header .el-tabs__nav {
    border: none;
}

::v-deep .el-tabs--card > .el-tabs__header {
    border-bottom: none;
    margin-bottom: 1px;
}

::v-deep .el-tabs__item{
    width: 120px;
    height: 49px;
    background: #E4E4E4;
    border-radius: 8px 8px 0px 0px;
    margin-left: 12px;
    text-align: center;
    // Native
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 49px;
    display: inline-block;
    list-style: none;
    font-size: 14px;
    font-weight: 500;
    // color: #303133;
    position: relative;
    &:first-child{
      margin-left: 20px;
    }
}
</style>
